import { useEffect, useState } from 'react';
import styles from './index.module.less';
import Position from './Position';
import HistoryPosition from './HistoryPosition';
import HistoryEntrust from './HistoryEntrust';
import TradeList from './TradeList';
import FundFlow from './FundFlow';
import CurrentEntrust from './CurrentEntrust';
import useRoute from '@/hooks/useRoute';
import { useAtom } from 'jotai';
import { reloadOrderAtom } from '@/stores';
import { useAtomValue } from 'jotai';
import { pageLeftWidthAtom } from '@/stores';
import { isLocal } from '@/utils';

let relaodNum = 1; // 刷新次数
export default function Order() {
  const { goto, getPageParams } = useRoute();
  const [reloadOrder, setReloadOrder] = useAtom(reloadOrderAtom);
  const pageLeftWidth = useAtomValue(pageLeftWidthAtom);
  const [tableWidth, setTableWidth] = useState(0);

  useEffect(() => {
    setTableWidth(pageLeftWidth < 1500 ? 1500 : pageLeftWidth);
  }, [pageLeftWidth]);

  useEffect(() => {
    if (reloadOrder) {
      relaodNum++;
      setReloadOrder(false);
    }
  }, [reloadOrder]);

  const [curTab, setCurTab] = useState(getPageParams('orderTab') || 'position');
  const tabs = [
    {
      label: '仓位',
      key: 'position',
      page: <Position key={relaodNum} tableWidth={tableWidth} />,
    },
    // {
    //   label: '历史仓位',
    //   key: 'historyPosition',
    //   page: <HistoryPosition key={relaodNum} tableWidth={tableWidth} />,
    // },
    {
      label: '当前委托',
      key: 'currentEntrust',
      page: <CurrentEntrust key={relaodNum} tableWidth={tableWidth} />,
    },
    // {
    //   label: '历史委托',
    //   key: 'historyEntrust',
    //   page: <HistoryEntrust key={relaodNum} tableWidth={tableWidth} />,
    // },
    // {
    //   label: '成交记录',
    //   key: 'tradeList',
    //   page: <TradeList key={relaodNum} tableWidth={tableWidth} />,
    // },
    // isLocal() && {
    //   label: '资金流水',
    //   key: 'fundFlow',
    //   page: <FundFlow key={relaodNum} tableWidth={tableWidth} />,
    // },
  ];

  // 处理页面
  function getPagesByTabs(tabList: any[]) {
    let obj: any = {};
    tabList.forEach((item: any) => {
      obj[item.key] = item.page;
    });
    return obj;
  }

  return (
    <div className={`${styles.orderTabWrap} zcard`}>
      <div className={`${styles.oheader} flex`}>
        {tabs.map((item: any, index) => (
          <div
            className={`${styles.item} ${curTab === item.key && styles.itemact} `}
            onClick={() => {
              setCurTab(item.key);
              goto(`/home?contract=${getPageParams('contract')}&orderTab=${item.key}`);
            }}
            key={index}
          >
            {item.label}
          </div>
        ))}
      </div>
      <div>{getPagesByTabs(tabs)[curTab]}</div>
    </div>
  );
}
